<template>
    <div>
        
        <div style="">
            <h3 style="flex: 1; margin: 0px;">接口：{{target.info.name}}</h3>
            <div style="display: flex; align-items: center;">
                <span style="width:60px">用途</span>
                <n-select v-model:value="target.usage" class="stud-usage-select" @on-change="onUsageChanged" :options="usageOptions" />
            </div>
        </div>

        
        <!-- <div v-show="target.usage=='vdd'" size="small" style="margin-bottom:10px">
            <p>逻辑电源设定为5V 电压，这是为了和 PC/Mobile 设备兼容；但实际上很多零件内部是工作在 3.3V 电压的。</p>
            <p>VDD 是零件内部降压以后的电源，通常为3.3V。</p>
            <p>
                由于很多零件的VDD采用LDO降压，并且对应的Ground使用磁珠和其他Ground隔离，
                因此 VDD 的电压更稳定，干扰纹波较小。
            </p>
            <p>
                VDD 也可以用于电压一致、电流很小的驱动电路，例如 3.3V 的LED (&lt;电流20ma)。
            </p>
            <p>
                但如果将 VDD 接入到零件较多的电路中，这些零件的阻抗会对 VDD 的电压造成干扰，影响其稳定性。如果该 VDD 用于 ADC 的参考电压，则需要额外注意。
            </p>
        </div>
        <div v-show="target.usage=='vcc'" size="small" style="margin-bottom:20px">
            <p>VCC 是逻辑电路的工作电源，通常为 5V 电压。</p>
            <p>零件的逻辑电路统一以 5V VCC 输出，在其内部转换为其所需要的电压。</p>
        </div> -->
        <div v-show="target.usage=='vm'" size="small" style="margin-bottom:20px">
            <p>VM 是驱动电源，通常用于大于5V 或者相对于逻辑电路所需电流更大的零件（例如电机）。</p>
        </div>

        <!-- <PWM :target="target"></PWM>
        <GPIO :target="target"></GPIO>
        <Serial :target="target"></Serial> -->
    </div>
</template>

<style scoped>
.icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    display: inline-block;
    margin-left: 8px;
}

</style>
<style>
.stud-usage-select .ivu-select-dropdown {
    max-height: 400px ;
}
</style>

<script lang="ts" setup>
import { Stud } from '../../../../model/Stud';
import { AppModel } from '../../../../model/AppModel';
import { Usage } from '../../../../model/StudUsage';
import PWM from "./PWM.vue"
import GPIO from "./GPIO.vue"
import Serial from "./Serial.vue"
import {PartHost} from '../../../../model/parts/PartBase';
import { conn } from '../../@beshell/conn-ts/Connection';
import {ref, onMounted, reactive, watch, Ref} from 'vue'

const props = defineProps<{
    model: AppModel ,
    target: Stud ,
}>()

const usageOptions: {label: string, value: string}[] = reactive([])

const usageLib: {[key:string]: any} = {}
usageLib[Usage.i2csda] = {
    title: "I2C数据 (SDA)", icon: "swap"
}
usageLib[Usage.i2cscl] = {
    title: "I2C时钟 (SCL)", icon: "clock-circle"
}
usageLib['rx'] = {
    title: "UART接收 (RX)", icon: "swap-right"
}
usageLib['tx'] = {
    title: "UART发送 (TX)", icon: "swap-left"
}
usageLib[Usage.spisck] = {
    title: "SPI时钟 (SCK)", icon: "clock-circle"
}
usageLib[Usage.spimosi] = {
    title: "SPI主发从收 (MOSI)", icon: "swap"
}
usageLib[Usage.spimiso] = {
    title: "SPI主收从发 (MISO)", icon: "clock-circle"
}
usageLib[Usage.adc] = {
    title: "电压采样 (ADC模数转换)", icon: "line-chart"
}
usageLib[Usage.gpiooutput] = {
    title: "数字输出 (GPIO Output)", icon: "logout"
}
usageLib[Usage.gpioinput] = {
    title: "数字输入 (GPIO Input)", icon: "login"
}
usageLib[Usage.pwm] = {
    title: "PWM输出", icon: "bar-chart"
}
usageLib[Usage.reset] = {
    title: "重置 (Reset)", icon: "poweroff"
}
usageLib[Usage.vcc] = {
    title: "电源正极(3V3)", icon: "thunderbolt"
}
// usageLib[Usage.vdd] = {
//     title: "内部电源[+]", icon: "thunderbolt"
// }
usageLib[Usage.vm] = {
    title: "驱动电源正极(5V/6V)", icon: "thunderbolt"
}
usageLib[Usage.ground] = {
    title: "电源负极 (Ground)", icon: "stock"
}
usageLib[Usage.none] = {
    title: "不使用", icon: "disconnect"
}


onMounted(()=> {
})

function usageopt(usage: string) {
    if(usage==Usage.uartmosi) {
        return (props.target.part instanceof PartHost)? usageLib["tx"]: usageLib["rx"]
    }
    else if(usage==Usage.uartmiso) {
        return (props.target.part instanceof PartHost)? usageLib["rx"]: usageLib["tx"]
    }
    else if(usageLib[usage]) {
        return usageLib[usage]
    }
    else  {
        return {title:"Unknow:" + usage}
    }
}

function updateUsageOptions() {
    console.log(props.target.optUsages)
    usageOptions.length = 0
    for(let usage of props.target.optUsages) {
        if(!usageLib[usage]) {
            console.error("unknown usage",usage)
            continue
        }
        usageOptions.push({
            label: usageLib[usage].title ,
            value: usage
        })
    }
}

function onUsageChanged(usage: Usage) {
}

watch(()=>props.target, updateUsageOptions)

</script>